<!DOCTYPE html>
<html lang="en">

<head>
    <title>购物车</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="pragma" content="no-cach">
    <meta name="robots" content="all">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="date=no">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="./css/bargain.css">
</head>

<body class="shop-cart">
    <div class="top-tool">
        <div>
            <div class="checkall"> </div>
            <span>普通购买</span>
        </div>
        <a href="javascript:void(0)" id="complate">完成</a>
    </div>
    <form id="container">
        <div class="order-item ">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="1">
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span>
                        <div class="num-control">
                            <span class="num-control-sub-hook iconfont iconjianhaoshouqi"></span>
                            <input class="num-control-input-hook" type="number" name="num" value="1">
                            <span class="num-control-add-hook iconfont iconjiahaozhankai"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="order-item ">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="2">
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span>
                        <div class="num-control">
                            <span class="num-control-sub-hook iconfont iconjianhaoshouqi"></span>
                            <input class="num-control-input-hook" type="number" name="num" value="1">
                            <span class="num-control-add-hook iconfont iconjiahaozhankai"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="order-item disabled">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="3" disabled>
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span><span class="span3">已下架</span></div>
                </div>
            </div>
        </div>
    </form>
    <div class="del-bottom-tool">
        <div id="del-order">删除</div>
    </div>


    <script src="./js/jquery.min.js"></script>
    <script>
        var delUrl = "/",
            completeUrl = "/";
        $('.checkall').on("click", function () {

            if ($(this).hasClass('checked')) {
                $('input[name="course"]').each(function () {
                    if (!$(this).prop("disabled")) $(this).prop("checked", false);
                });
                $(this).removeClass('checked')
            } else {
                $('input[name="course"]').each(function () {
                    if (!$(this).prop("disabled")) $(this).prop("checked", true);
                });
                $(this).addClass('checked')
            }
        });

        $('#del-order').click(function () {
            var params = [];
            $('input:checkbox[name=course]').each(function (index, checkbox) {
                var value = checkbox.value,
                    isChecked = $(checkbox).prop("checked");
                if (isChecked) params.push(value)
            })
            window.location = delUrl + '?ids=' + params.join(',')
        })

        $('#complate').click(function(){
            $("#container").submit()
        })

        var opts = {
            disabled: "disabled",
            min: 1,
            max: 10000
        };
      
        $('.num-control > .num-control-sub-hook ').click(function () {
       
            var $input = $(this).parent().find('.num-control-input-hook'),
                curValue = Number($input.val());
            if (curValue > opts.min) {
                $input.val(curValue - 1)
            }
            resetDisable($(this).parent())
        })

        $('.num-control > .num-control-add-hook ').click(function () {
          
            var $input = $(this).parent().find('.num-control-input-hook'),
                curValue = Number($input.val());
            if (curValue < opts.max) {
                $input.val(curValue + 1)
            }
            resetDisable($(this).parent())
        })

        $('.num-control').each(function(index,el){
            resetDisable($(el))
        })

        function resetDisable($pEl) {
            var value = Number($pEl.find('.num-control-input-hook').val());
            if (value < opts.min + 1) {
                $pEl.find('.num-control-sub-hook').addClass('disabled')
            } else {
                $pEl.find('.num-control-sub-hook').removeClass('disabled')
            }

            if (value > opts.max - 1) {
                $pEl.find('.num-control-add-hook').addClass('disabled')
            } else {
                $pEl.find('.num-control-add-hook').removeClass('disabled')
            }
        }


       
    </script>
</body>

</html>